<template>
  <div>
    <el-row :gutter="20" v-for="(item, index) in data" :key="index" style="margin-bottom: 20px;">
      <el-col :span="24">
        <div class="icon-title">
          {{ item.name }}
        </div>
      </el-col>
      <el-col :span="4" v-for="ite in item.children" :key="ite.id">
        <div class="icon-select-item" @click="selectImage(ite)">
          <el-image :src="ite.img" class="icon-image">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          <p>{{ ite.name }}</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'icon-select',
  props: {
    list: {
      type: Array,
      default: () => {}
    }
  },
  data () {
    return {
      data: []
    }
  },
  methods: {
    // 选择图片
    selectImage (item) {
      this.$emit('select', item)
    }
  },
  watch: {
    list: {
      handler (newval) {
        this.data = newval
      },
      // 可以一进页面就触发监听器  监听器自带的immediate
      immediate: true,
      deep: true
    }
  }
}
</script>
<style lang="scss">
  .icon-select-item {
    text-align: center;
    cursor: pointer;
    &:hover {
      .icon-image {
        transform: scale(1.1);
        transition: all 0.3s;
      }
      p {
        // color: $theme-table-button-view-text-color;
      }
    }
    .icon-image {
      width: 40px;
      height: 40px;
    }
  }
  .icon-title {
    font-size: 18px;
    color: #000000;
    position: relative;
    padding-left: 15px;
    margin-bottom: 20px;
    &::before {
      content: "";
      display: block;
      width: 4px;
      height: 16px;
      background-color: #487eea;
      position: absolute;
      left: 0;
      top: 4px;
      // background-color: $theme-table-button-view-text-color;
    }
  }
</style>
